<template>
  <div class="tree">
    <fx-card title="基础用法">
      <fx-tree :data="tree"></fx-tree>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="带选择">
      <fx-tree :data="checkedTree" is-checked :default-checked-keys="[1]"></fx-tree>
      <template #hide>
        <pre v-highlight="checked"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'tree',
  setup () {
    const tree = reactive([
      {
        label: '一级',
        id: 1,
        children: [
          {
            label: '二级',
            id: 2,
            children: [
              {
                label: '三级',
                id: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 4,
        children: [
          {
            label: '二级',
            id: 5,
            children: [
              {
                label: '三级',
                id: 6
              }
            ]
          },
          {
            label: '二级',
            id: 7,
            children: [
              {
                label: '三级',
                id: 8
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 9,
        children: [
          {
            label: '二级',
            id: 10,
            children: [
              {
                label: '三级',
                id: 11
              }
            ]
          },
          {
            label: '二级',
            id: 12,
            children: [
              {
                label: '三级',
                id: 13
              }
            ]
          }
        ]
      }
    ])
    const checkedTree = reactive([
      {
        label: '一级',
        id: 1,
        children: [
          {
            label: '二级',
            id: 2,
            children: [
              {
                label: '三级',
                id: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 4,
        children: [
          {
            label: '二级',
            id: 5,
            children: [
              {
                label: '三级',
                id: 6
              }
            ]
          },
          {
            label: '二级',
            id: 7,
            children: [
              {
                label: '三级',
                id: 8
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 9,
        children: [
          {
            label: '二级',
            id: 10,
            children: [
              {
                label: '三级',
                id: 11
              }
            ]
          },
          {
            label: '二级',
            id: 12,
            children: [
              {
                label: '三级',
                id: 13
              }
            ]
          }
        ]
      }
    ])

    const base = `<fx-tree :data="tree"></fx-tree>
export default defineComponent({
  name: 'tree',
  setup () {
    const tree = reactive([
      {
        label: '一级',
        id: 1,
        children: [
          {
            label: '二级',
            id: 2,
            children: [
              {
                label: '三级',
                id: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 4,
        checked: true,
        children: [
          {
            label: '二级',
            id: 5,
            children: [
              {
                label: '三级',
                id: 6
              }
            ]
          },
          {
            label: '二级',
            id: 7,
            children: [
              {
                label: '三级',
                id: 8
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 9,
        children: [
          {
            label: '二级',
            id: 10,
            children: [
              {
                label: '三级',
                id: 11
              }
            ]
          },
          {
            label: '二级',
            id: 12,
            children: [
              {
                label: '三级',
                id: 13
              }
            ]
          }
        ]
      }
    ])
  }
})`

    const checked = `<fx-tree :data="checkedTree" is-checked></fx-tree>
export default defineComponent({
  name: 'tree',
  setup () {
    const checkedTree = reactive([
      {
        label: '一级',
        id: 1,
        children: [
          {
            label: '二级',
            id: 2,
            children: [
              {
                label: '三级',
                id: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 4,
        checked: true,
        children: [
          {
            label: '二级',
            id: 5,
            children: [
              {
                label: '三级',
                id: 6
              }
            ]
          },
          {
            label: '二级',
            id: 7,
            children: [
              {
                label: '三级',
                id: 8
              }
            ]
          }
        ]
      },
      {
        label: '一级',
        id: 9,
        children: [
          {
            label: '二级',
            id: 10,
            children: [
              {
                label: '三级',
                id: 11
              }
            ]
          },
          {
            label: '二级',
            id: 12,
            children: [
              {
                label: '三级',
                id: 13
              }
            ]
          }
        ]
      }
    ])
  }
})`

    return {
      tree,
      base,
      checked,
      checkedTree
    }
  }
})
</script>

<style scoped lang="scss">
.tree {
}
</style>
